<template>
  <div>
    <el-card>
      <el-form label-width="60px" :model="query" :inline="true" size="mini">
        <el-form-item label="主机">
          <el-input
            v-model="query.host"
            placeholder="请输入主机名称"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getListData">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="warning" @click="resetForm">重置</el-button>
        </el-form-item>
        <el-form-item>
          <downLoadExcel :json_fields="fields" name="告警来源报表" :json_data="tableData" />
        </el-form-item>
      </el-form>
      <div id="alarmSource">
        <el-table
          :data="tableData"
          style="width: 100%"
          :cell-style="cellStyle"
          height="calc(100vh - 260px)"
          @row-click="goInfo"
        >
          <el-table-column prop="hostName" label="主机"> </el-table-column>
          <el-table-column prop="severity" label="严重性">
            <template slot-scope="scope">
              <el-tag type="danger" size="mini">{{
                scope.row.severity | getSeverity
              }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="status" label="状态"
            ><template slot-scope="scope">
              {{ scope.row.status | getstatus }}
            </template>
          </el-table-column>
          <el-table-column prop="name" label="告警标题"> </el-table-column>
          <el-table-column prop="continueTime" label="持续时间">
            <template slot-scope="scope">{{
              scope.row.continueTime | getTime
            }}</template>
          </el-table-column>
          <!-- <el-table-column prop="tags"
                                 label="标记">
                    <template slot-scope="scope">
                        <el-tag size="mini"
                                effect="dark"
                                color="#758c98"
                                style="margin-right: 10px; color: #ffffff; border: none"
                                v-for="(item, index) in scope.row.tags"
                                :key="index">{{ item }}</el-tag>
                    </template>
                </el-table-column> -->
          <el-table-column
            label="操作"
            align="center"
            class-name="small-padding fixed-width"
          >
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                icon="el-icon-view"
                @click="Detail(scope.row, scope.index)"
                >详情</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <pagination
          v-show="total > 0"
          :total="total"
          :page.sync="query.pageNum"
          :limit.sync="query.pageSize"
          :select-data-len="multipleSelection.length"
          @pagination="getListData()"
        />
      </div>
    </el-card>
  </div>
</template>

<script>
import {
  getAlarmSourceApi, //告警来源报表
} from "@/api/dataPresentation/alarmCategory.js";
import downLoadExcel from "@/components/downLoadExcel/downLoadExcel";
export default {
  components: {
    downLoadExcel,
  },
  data() {
    return {
      // 数据条数
      total: 0,
      //分页数据
      query: {
        pageNum: 1, //页码
        pageSize: 10, //页数
        host: null, //主机名
      },
      multipleSelection: [], //多选
      tableData: [], //表格数据
      //导出的字段
      fields:{
        主机:"hostName",
        严重性:"severity",
        状态:"status",
        告警标题:"name",
        持续时间:"continueTime",
        开始时间:"beginTime",
      }
    };
  },
  methods: {
    //获取列表数据
    getListData() {
      getAlarmSourceApi(this.query).then((res) => {
        this.tableData = res.data.date;
        this.total = res.data.total;
      });
    },
    Detail(row) {
      console.log(row);
      this.$router.push({ path: "Detail?eventid=" + row.eventid });
    },
    //跳转页面
    goInfo() {},
    //重置
    resetForm() {
      this.query = {
        pageNum: 1, //页码
        pageSize: 10, //页数
        host: null, //主机名
      };
      this.getListData();
    },
    //表格id样式
    cellStyle({ column, columnIndex }) {
      // 状态列字体颜色
      if (column.ID !== "" && columnIndex === 1) {
        return "color: #46a6ff;cursor:pointer;";
      }
    },
  },
  created() {
    this.getListData();
  },
  filters: {
    //过滤状态
    getstatus(val) {
      switch (val) {
        case 0:
          return "恢复";
        case 1:
          return "未恢复";
        case 2:
          return "未知";
      }
    },
    //持续时间过滤器
    getTime(durationStr) {
      if (!durationStr) {
        return "";
      }
      let days = "";
      let hours = "";
      let minutes = "";
      let seconds = "";
      if (durationStr.indexOf("h") == -1 && durationStr.indexOf("m") == -1) {
        //没有 h 和 m
        durationStr = "0h0m" + durationStr;
      } else if (durationStr.indexOf("h") == -1) {
        //没有 h
        durationStr = "0h" + durationStr;
      } else if (durationStr.indexOf("m") == -1) {
        //没有 m
        durationStr =
          durationStr.split("h")[0] + "h0m" + durationStr.split("h")[1];
      }
      days = Math.floor(durationStr.split("h")[0] / 24) + "天";
      days == "0天" ? (days = "") : null;
      hours = Math.floor(durationStr.split("h")[0] % 24) + "小时";
      days == "" && hours == "0小时" ? (hours = "") : null;
      minutes = durationStr.split("h")[1].split("m")[0] + "分";
      days == "" && hours == "" && minutes == "0分" ? (minutes = "") : null;
      seconds = durationStr.split("m")[1].split("s")[0] + "秒";
      return days + hours + minutes + seconds;
    },
    //过滤严重性
    getSeverity(val) {
      switch (val) {
        case 0:
          return "未分类";
        case 1:
          return "信息";
        case 2:
          return "警告";
        case 3:
          return "一般严重";
        case 4:
          return "严重";
        case 5:
          return "灾难";
      }
    },
  },
};
</script>

<style lang="scss" scoped>
#alarmSource {
  background-color: #ffffff;
  box-sizing: border-box;
  padding: 10px;
  border-radius: 5px;
}
</style>